import React, { useRef, useState } from 'react'
import { StyleSheet, Text, View, Image, Dimensions } from 'react-native'
import { Button, Carousel } from '@ant-design/react-native'
export default function Swiper() {

    let [selectedIndex, setselectedIndex] = useState(2)
    let [autoplay, setautoplay] = useState(true)
    let carousel = useRef(null)

    let onHorizontalSelectedIndexChange = (index: number) => {
        /* tslint:disable: no-console */
        console.log('horizontal change to', index)
        setselectedIndex(index)
    }



    return (
        <View>
            <Carousel
                style={styles.wrapper}
                selectedIndex={selectedIndex}
                autoplay
                infinite
                afterChange={() => (onHorizontalSelectedIndexChange)}
                ref={carousel}>
                <View
                    style={[styles.containerHorizontal, { backgroundColor: 'red' }]}>
                    <Image style={styles.imgsize} source={require("@/assets/img//u1721.jpg")} />
                </View>
                <View
                    style={[styles.containerHorizontal, { backgroundColor: 'blue' }]}>
                    <Image style={styles.imgsize} source={require("@/assets/img/u1722.jpg")} />
                </View>
                <View
                    style={[
                        styles.containerHorizontal,
                        { backgroundColor: 'yellow' },
                    ]}>
                    <Image style={styles.imgsize} source={require("@/assets/img//u1721.jpg")} />
                </View>
                <View
                    style={[styles.containerHorizontal, { backgroundColor: 'aqua' }]}>
                    <Image style={styles.imgsize} source={require("@/assets/img/u1722.jpg")} />
                </View>
            </Carousel>
        </View>
    )
}

const styles = StyleSheet.create({
    imgsize:{
        width: Dimensions.get('window').width,
        height: 150
    },
    wrapper: {
        backgroundColor: '#fff',
        width: '100%',
        height: 150,
    },
    containerHorizontal: {
        flexGrow: 1,
        alignItems: 'center',
        justifyContent: 'center',
        height: 150,
    },
    containerVertical: {
        flexGrow: 1,
        alignItems: 'center',
        justifyContent: 'center',
        height: 150,
    },
    text: {
        color: '#fff',
        fontSize: 36,
    },
})